<template>
  <div class="home">
    <div class="lunbo">
        <!-- <XtxCarousel :sliders="slidersa" :autoPlay="true" :duration="2500" /> -->
        <el-carousel height="600px">
          <el-carousel-item v-for="item in slidersa" :key="item">
            <img class="lunboImg" :src="item.imgUrl" alt="" style="width:100%">
            <h3 text="2xl" class="justify-left"><i>{{ item.title }}</i></h3>
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="messageBox">
      <div class="title">公告</div>
      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <li v-for="(item,index) in noticeList" :key="item.id" class="infinite-list-item" @click="toDetail(index)">
         【{{item.date}}】 {{item.title}}
        </li>
      </ul>
      <div class="sign"><el-icon color="#1e9493" :size="40"><Paperclip/></el-icon></div>
    </div>
    <div class="firstCon">
      <div class="title">三碳</div>
      <div class="content">
        <el-row>
          <el-col v-for="(o, index) in nowlageList" :key="o" :span="6" :offset="index > 0 ? 3 : 0" @click="toMore(o.id)">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="o.image" style="width:100%;height:100%"/>
              <div style="padding: 14px">
                <span>{{o.title}}</span>
                <div class="bottom">
                  <time class="time">{{ o.content }}</time>
                  <el-button text class="button" @click="toMore(o.id)">查看更多</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="firstCon">
      <div class="title">政府碳管理</div>
      <div class="content clearfix">
        <div class="leftList">
          <ul>
            <li v-for="(item,index) in firstList" :key="item.id" :class="nowsIndex == index ? 'clearfix normalLi nowsLi' : 'clearfix normalLi'" @click="nowsIndex = index">
              <div class="leftImg"> <img :src="item.leftImage" alt=""></div>
              <div class="rightContent">
                <div class="topTitle">{{item.title}}</div>
                <div class="topContent">{{item.content}}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="rightImg">
          <div class="" v-for="(item,index) in firstList" :key="item.id" v-show="nowsIndex == index">
            <img :src="item.bigUrl" alt="" style="width:100%;margin-top: 20px;">
          </div>
        </div>
      </div>
    </div>
    <div class="firstCon">
      <div class="title">企业碳排放</div>
      <div class="content clearfix">
        <div class="leftList">
          <ul>
            <li v-for="(item,index) in secondList" :key="item.id" :class="nowsIndex2 == index ? 'clearfix normalLi nowsLi' : 'clearfix normalLi'" @click="nowsIndex2 = index">
              <div class="leftImg"> <img :src="item.leftImage" alt=""></div>
              <div class="rightContent">
                <div class="topTitle">{{item.title}}</div>
                <div class="topContent">{{item.content}}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="rightImg">
          <div class="" v-for="(item,index) in secondList" :key="item.id" v-show="nowsIndex2 == index">
            <img :src="item.bigUrl" alt="" style="width:100%;margin-top: 20px;">
          </div>
        </div>
      </div>
    </div>
    <div class="firstCon">
      <div class="title">企业碳中和规划</div>
    </div>

    <!-- <div class="firstCon">
      <div class="title">个人碳普惠</div>
    </div> -->
    
  </div>
</template>

<script>
import { ref } from 'vue'
// @ is an alias to /src

// import { arrayBuffer } from 'stream/consumers';
import XtxCarousel from '../common/library.vue'

export default {
  name: 'HomeView',
  data() {
    return {
      slidersa:[{imgUrl:require('../assets/bigaa.jpeg'),title:""},{imgUrl:require('../assets/bigbb.jpeg'),title:""},{imgUrl:require('../assets/bigcc.jpeg'),title:""},],
      noticeList:[{"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},
        {"title":'2022年6月14日全国碳排放权交易市场清结算信息日报',id:1,date:'2022-06-15'},],
        nowlageList:[{"title":"政府碳管理","content":"政府以引导企业从高碳到低碳转型，以减少生产、经营活动中的二氧化碳排放为核心的管理活动。","image":require('../assets/aab.png'),"id":'GovernmentMana'},
        {"title":"企业碳排放","content":"企业在碳管理政策的要求下，进行碳排放指标之间的合理交易，来促进企业高质量低碳发展。","image":require('../assets/bb.jpeg'),"id":'EnterpriseCarbonE'},
        {"title":"个人碳普惠","content":"个人积极参与生态环境保护,践行简约适度、绿色低碳的生活方式，构建绿色生态环境，促进人与自然和谐发展。","image":require('../assets/ccb.png'),"id":"PersonalCarbonBenefits"},],
        nowsIndex:0,
        nowsIndex2:0,
        firstList:[{"leftImage":require('../assets/planList.png'),"title":"区域温室气体排放清单","content":"集成数据，统一展示","bigUrl":require('../assets/u1373.png'),},
        {"leftImage":require('../assets/monitor.png'),"title":"企业数据监测","content":"分析数据，化繁为简","bigUrl":require('../assets/u747.png'),},
        {"leftImage":require('../assets/Submitted.png'),"title":"企业数据报送","content":"一对一报送","bigUrl":require('../assets/u1076.png'),},
        {"leftImage":require('../assets/plan.png'),"title":"低碳发展规划","content":"定制规划方案","bigUrl":require('../assets/u733.png'),}],
        secondList:[{"leftImage":require('../assets/jihuabianzhi.png'),"title":"碳监测计划编制","content":"碳量排查，编制计划","bigUrl":require('../assets/u1078.png'),},
        {"leftImage":require('../assets/fangan.png'),"title":"碳达峰实施方案","content":"响应政策、因地制宜","bigUrl":require('../assets/u1389.png'),},
        {"leftImage":require('../assets/zuji.png'),"title":"碳足迹认证","content":"足迹认证、对症下药","bigUrl":require('../assets/u1079.png'),},
        {"leftImage":require('../assets/ziliaomana.png'),"title":"碳管理体系搭建","content":"碳资产管理规范体系","bigUrl":require('../assets/u1365.png'),},]
    }
  },
  methods:{
    load(){

    },
    toDetail(index){
      this.$router.push({path:'articleRead',query:{back:'/'}});
    },
    toMore(id){
      this.$router.push({path:id,query:{back:'/'}});
      
    },
  },
  mounted(){
    window.scrollTo(0,0);
  },
  
  components: {
    XtxCarousel,
  },
  
}

</script>
<style scoped>
  .home{
    width: 100%;
    height: 100%;
  }
  
/* 轮播图开始 */
  .lunbo{
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #eeeeee;
    position: relative;
  }
  .lunboImg{
    position:absolute;
  }
  .el-carousel__container{
    width:100%!important;
    height:100%!important;
  }
.el-carousel__item h3 {
  color: #8293a8;
  opacity: 0.75;
  line-height: 450px;
  margin: 0;
  /* text-align: center; */
  font-size:72px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 轮播图结束 */
  .firstCon{
    width:100%;
    min-height:480px;
    margin:auto;
    background: #fefefe;
  }
  .title{
    width: 100%;
    font-size: 34px;
    text-align: center;
    margin: 30px 0 20px;
    color:#333;
  }
  .infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    width: 2px !important;
  }
  ::-webkit-scrollbar {
    width: 2px !important;
  }
/* 公告部分开始 */
.infinite-list .infinite-list-item {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  height: 40px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: #1e9493;

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  cursor: pointer;
  width: 380px;
  padding:10px 4px;
  box-sizing: border-box;
}
.infinite-list .infinite-list-item:hover{
  color: red;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.messageBox{
  width: 400px;
  position: absolute;
  top:200px;
  right:10%;
  z-index: 10;
  border: 1px solid #fefefe;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  padding-bottom: 20px;
  
  -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
  -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
  box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
}

.sign{
  position: absolute;
  top:-16px;
  right: -10px;
  z-index: 11;
}
/* 公告部分结束*/

/* 三碳卡片开始 */
.content .time {
  font-size: 12px;
  color: #999;
  line-height: 20px;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.content .bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .button {
  padding: 0;
  min-height: auto;
}
.content .image {
  width: 100%;
  display: block;
}
.content .el-card{
  cursor: pointer;
}
/* 三碳卡片结束 */
.content{
  width: 1080px;
  margin:auto;
}
.leftList{
  width:500px;
  float:left;
}
.rightImg{
  width:500px;
  text-align:center;
  line-height:100%;
  float:right;
}
.rightImg img{
  margin:auto;
}
.normalLi{
  border-left:5px solid #ffffff;
  padding:20px;
  box-sizing:border-box;
  margin-top:20px;
  cursor: pointer;
}
.nowsLi{
  width:450px;
  border-left:5px solid #3691e6;
  -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
  -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
  box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
}
.leftImg{
  width:100px;
  float:left;
}
.rightContent{
  width:300px;
  float:left;
}
.topTitle{
  font-size:18px;
  color:#333;
  line-height:30px;
}
.topContent{
  font-size:14px;
  color:#666;
  line-height:24px;
}
ul{
  list-style: none;
}
</style>
